<template>
	<view class="wrap-item flex align-center just-between row-item" v-if="item">
		<view class="title-bg f-30 flex">
			<view class="must" v-if="item.require">*</view>
	
			<view class="title">{{ item.title }}</view>
		</view>
	
		<view class="wrap-right flex align-center just-end">
			<input
				class="input f-30 text-right"
				:placeholder="item.place"
				placeholder-class="place"
				:type="item.mode"
				:maxlength="item.maxlength"
				:value="value"
				:password="!showPwd"
				@input="$emit('input', $event.detail.value)"
				:disabled="item.disabled"
			/>
			
			<view class="camera" @click="showPwd = !showPwd">
				<image class="camera" v-if="showPwd" :src="$staticImagePath('setting/pwd_show.png')" />
				
				<image class="camera" v-else :src="$staticImagePath('setting/pwd_hidden.png')" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 输入框的值
			 */
			value: {
				type: String,
				default: "",
			},
			/**
			 * 数据
			 */
			item: {
				type: Object,
				default: null,
			},
		},
		data() {
			return {
				showPwd: false,
			}
		},
	};
</script>

<style>
	@import "@/css/publish.css";
</style>